import React, { Component } from 'react';
import { Layout, Menu } from 'antd';
import {
  HeartOutlined,
  ClockCircleOutlined,
  DownloadOutlined
} from '@ant-design/icons';
import MyNavLink from '../MyNavLink'
import './index.css'
const { Sider } = Layout;
const { SubMenu } = Menu;
export default class Aside extends Component {
  
  render() {
    return (
      <Sider
        theme='light'
        style={{
          overflow: 'auto',
          height: '86vh'
        }}
      >
        <Menu theme="light" mode="inline" defaultSelectedKeys={['1']}>
          <Menu.Item key="1"><MyNavLink to="/discovermusic" >发现音乐</MyNavLink></Menu.Item>
          <Menu.Item key="2"><MyNavLink to="/podcast" >发现音乐</MyNavLink>播客</Menu.Item>
          <Menu.Item key="3">视频</Menu.Item>
          <Menu.Item key="4">关注</Menu.Item>
          <Menu.Item key="5">直播</Menu.Item>
          <Menu.Item key="6">私人FM</Menu.Item>
          <SubMenu key="7" title="我的音乐">
            <Menu.Item key="7-1" icon={<DownloadOutlined />}>本地与下载</Menu.Item>
            <Menu.Item key="7-2" icon={<ClockCircleOutlined />}>最近播放</Menu.Item>
          </SubMenu>
          <SubMenu key="8" title="创建的歌单">
            <Menu.Item key="8-1" icon={<HeartOutlined />}>我喜欢的音乐</Menu.Item>
          </SubMenu>
        </Menu>
      </Sider>
    )
  }
}
